import React, { forwardRef, useState,useEffect, useRef, useImperativeHandle, useMemo } from "react"
import PropTypes from "prop-types"
import BScroll from "better-scroll"
import styled from 'styled-components';
import Loading from '../loading/index';
import Loading2 from '../loading-v2/index';
import { debounce } from "@/api/utils";
const ScrollContainer = styled.div`
 width: 100%;
 height: 100%;
 overflow: hidden;
`
const PullUpLoading = styled.div`
 position: absolute;
 left:0; right:0;
 bottom: 5px;
 width: 60px;
 height: 60px;
 margin: auto;
 z-index: 100;
`
export const PullDownLoading = styled.div`
 position: absolute;
 left:0; right:0;
 top: 0px;
 height: 30px;
 margin: auto;
 z-index: 100;
`
// 下为问题代码，以此为鉴
// useEffect(() => {
// if(bScroll) return;
// const scroll = new BScroll(scrollContaninerRef.current, {
// scrollX: direction === "horizental",
// scrollY: direction === "vertical",
// probeType: 3,
// click: click,
// bounce:{
// top: bounceTop,
// bottom: bounceBottom
// }
// });
// setBScroll(scroll);
// if(pullUp) {
// scroll.on('scrollEnd', () => {
// //判断是否滑动到了底部
// if(scroll.y <= scroll.maxScrollY + 100){
// pullUp();
// }
// });
// }
// if(pullDown) {
// scroll.on('touchEnd', (pos) => {
// //判断⽤户的下拉动作
// if(pos.y > 50) {
// debounce(pullDown, 0)();
// }
// });
// }
// if(onScroll) {
// scroll.on('scroll', (scroll) => {
// onScroll(scroll);
// })
// }
// if(refresh) {
// scroll.refresh();
// }
// return () => {
// scroll.off('scroll');
// setBScroll(null);
// }
// // eslint-disable-next-line
// }, []);
const Scroll = forwardRef((props, ref) => {
 const [bScroll, setBScroll] = useState();
 const scrollContaninerRef = useRef();
 const { direction, click, refresh, pullUpLoading, pullDownLoading, bounceTop, bounceBottom } = props;
 const { pullUp, pullDown, onScroll } = props;
 let pullUpDebounce = useMemo(() => {
 return debounce(pullUp, 500)
 }, [pullUp]);
 let pullDownDebounce = useMemo(() => {
 return debounce(pullDown, 500)
 }, [pullDown]);
 useEffect(() => {
 const scroll = new BScroll(scrollContaninerRef.current, {
 scrollX: direction === "horizental",
 scrollY: direction === "vertical",
 probeType: 3,
 click: click,
 bounce:{
 top: bounceTop,
 bottom: bounceBottom
 }
 });
 setBScroll(scroll);
 return () => {
 setBScroll(null);
 }
 // eslint-disable-next-line
 }, []);
 useEffect(() => {
 if(!bScroll || !onScroll) return;
 bScroll.on('scroll', onScroll)
 return () => {
 bScroll.off('scroll', onScroll);
 }
 }, [onScroll, bScroll]);
 useEffect(() => {
 if(!bScroll || !pullUp) return;
 const handlePullUp = () => {
 //判断是否滑动到了底部
 if(bScroll.y <= bScroll.maxScrollY + 100){
 pullUpDebounce();
 }
 };
 bScroll.on('scrollEnd', handlePullUp);
 return () => {
 bScroll.off('scrollEnd', handlePullUp);
 }
 }, [pullUp, pullUpDebounce, bScroll]);
 useEffect(() => {
 if(!bScroll || !pullDown) return;
 const handlePullDown = (pos) => {
 //判断⽤户的下拉动作
 if(pos.y > 50) {
 pullDownDebounce();
 }
 };
 bScroll.on('touchEnd', handlePullDown);
 return () => {
 bScroll.off('touchEnd', handlePullDown);
 }
 }, [pullDown, pullDownDebounce, bScroll]);
 useEffect(() => {
 if(refresh && bScroll){
 bScroll.refresh();
 }
 });
 useImperativeHandle(ref, () => ({
 refresh() {
 if(bScroll) {
 bScroll.refresh();
 bScroll.scrollTo(0, 0);
 }
 },
 getBScroll() {
 if(bScroll) {
 return bScroll;
 }
 }
 }));
 const PullUpdisplayStyle = pullUpLoading ? { display: "" } : { display: "none" };
 const PullDowndisplayStyle = pullDownLoading ? { display: "" } : { display: "none" };
 return (
 <ScrollContainer ref={scrollContaninerRef}>
 {props.children}
 {/* 滑到底部加载动画 */}
 <PullUpLoading style={ PullUpdisplayStyle }><Loading></Loading></PullUpLoading>
 {/* 顶部下拉刷新动画 */}
 <PullDownLoading style={ PullDowndisplayStyle }><Loading2></Loading2></PullDownLoading>
 </ScrollContainer>
 );
})
Scroll.defaultProps = {
 direction: "vertical",
 click: true,
 refresh: true,
 onScroll:null,
 pullUpLoading: false,
 pullDownLoading: false,
 pullUp: null,
 pullDown: null,
 bounceTop: true,
 bounceBottom: true
};
Scroll.propTypes = {
 direction: PropTypes.oneOf(['vertical', 'horizental']),
 refresh: PropTypes.bool,
 onScroll: PropTypes.func,
 pullUp: PropTypes.func,
 pullDown: PropTypes.func,
 pullUpLoading: PropTypes.bool,
 pullDownLoading: PropTypes.bool,
 bounceTop: PropTypes.bool,//是否⽀持向上吸顶
 bounceBottom: PropTypes.bool//是否⽀持向下吸顶
};
export default Scroll;